import { useState, useEffect } from "react";
import { Tabs, Table, message } from "antd";
import type { TabsProps, TableColumnsType } from "antd";
import "./index.less";

import { friendRequestList, agreeFriendRequest, rejectFriendRequest } from "@api/notification";

interface User {
    id: number;
    username: string;
    headPic: string;
    nickName: string;
    email: string;
    createTime: Date;
}
interface FriendRequest {
    id: number;
    fromUserId: number;
    toUserId: number;
    reason: string;
    createTime: Date;
    fromUser: User;
    toUser: User;
    status: number;
}

export function Notification() {
    const [fromMe, setFromMe] = useState<Array<FriendRequest>>([]);
    const [toMe, setToMe] = useState<Array<FriendRequest>>([]);


    const toMeColumns: TableColumnsType<FriendRequest> = [
        {
            title: '用户',
            render: (_, record) => {
                return <div>
                    <img src={record.fromUser.headPic} width={30} height={30} alt="" />
                    {' ' + record.fromUser.nickName + '请求加你为好友'}
                </div>
            }
        },
        {
            title: "理由",
            dataIndex: 'reason'
        },
        {
            title: '请求时间',
            render: (_, record) => {
                return new Date(record.createTime).toLocaleString();
            }
        },
        {
            title: '状态',
            render(_, record) {
                const map: Record<string, any> = {
                    0: '申请中',
                    1: '已通过',
                    2: '已拒绝'
                };
                return <div>
                    {map[record.status]}
                </div>
            },
        },
        {
            title: '操作',
            render: (_, record) => {
                return <div>
                    <a href="#" onClick={() => agree(record.fromUserId)}>同意</a>
                    <a href="#" onClick={() => reject(record.fromUserId)}>拒绝</a>
                </div>
            }
        }
    ];
    const fromMeColumns: TableColumnsType<FriendRequest> = [
        {
            title: '用户',
            render: (_, record) => {
                return <div>
                    {' 请求添加好友 ' + record.toUser.nickName}
                    <img src={record.toUser.headPic} width={30} height={30} />
                </div>
            }
        },
        {
            title: "理由",
            dataIndex: 'reason'
        },
        {
            title: '请求时间',
            render: (_, record) => {
                return new Date(record.createTime).toLocaleString()
            }
        },
        {
            title: '状态',
            render: (_, record) => {
                const map: Record<string, any> = {
                    0: '申请中',
                    1: '已通过',
                    2: '已拒绝'
                }
                return <div>
                    {map[record.status]}
                </div>
            }
        }
    ];
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '发给我的',
            children: <div>
                <Table columns={toMeColumns} dataSource={toMe}></Table>
            </div>
        },
        {
            key: '2',
            label: '我发出的',
            children: <div>
                <Table columns={fromMeColumns} dataSource={fromMe}></Table>
            </div>
        }
    ];

    const queryFriendRequestList = async () => {
        try {
            const resp: any = await friendRequestList();
            setFromMe(resp.fromMe.map((item: FriendRequest) => {
                return {
                    ...item,
                    key: item.id
                }
            }));
            setToMe(resp.toMe.map((item: FriendRequest) => {
                return {
                    ...item,
                    key: item.id
                }
            }))
        } catch (error: any) {
            message.error(error?.data?.message || '系统繁忙，请稍后再试');
        }
    }
    const onChange = async (key: string) => {
        console.log(key);
    }
    const agree = async (id: number) => {
        try {
            await agreeFriendRequest(id);
            message.success('操作成功');
            queryFriendRequestList();
        } catch (error: any) {
            message.error(error?.data?.message || '系统繁忙，请稍后再试');
        }
    };
    const reject = async (id: number) => {
        try {
            await rejectFriendRequest(id);
        } catch (error: any) {
            message.error(error?.data?.message || '系统繁忙，请稍后再试');
        }
    }

    useEffect(() => {
        queryFriendRequestList();
    }, []);

    return <div className="notification">
        <div className="notification_list">
            <Tabs defaultActiveKey="1" items={items} onChange={onChange}></Tabs>
        </div>
    </div>
}